<template>
  <div>
    <van-field
      :required="required"
      :label="label"
      class="input_text_block"
      :label-width="labelWidth"
      readonly
    >
      <template #input>
        <div
          v-for="(item, index) in fileList"
          :key="index"
          style="text-align: left;word-break:break-all"
        >
          <a
            style="color: #00c1de"
            @click="_goEnclosure(item)"
          >
            {{ item.AttName }}{{ item.AttExt }}</a>
        </div>
      </template>
    </van-field>
    <!-- 附件 -->
    <!-- <van-popup
      v-model="filePopup"
      closeable
      round
      position="bottom"
      :style="{ height: '80%' }"
    >
      <div class="popup-title"></div>
      <div class="popup-content">
        <FileList @cbFile="_chooseFileList" />
      </div>
    </van-popup> -->
    <van-popup
      v-model="showPdf"
      closeable
      round
      position="bottom"
      :style="{ height: '100%' }"
    >
      <div class="popup-title">附件详情</div>
      <div class="popup-content">
        <PdfPreView :urlIn="pdfUrl" />
      </div>
    </van-popup>
    <van-overlay :show="showImg">
      <div
        class="imageShow"
        @click="showImg = false"
      >
        <van-image
          width="100%"
          :src="imagePath"
        />
      </div>
    </van-overlay>
  </div>
</template>

<script>
import PdfPreView from "@/components/Attach/PdfPreView";
export default {
  props: {
    labelWidth: {},
    labelName: {
      type: String,
      required: false,
    },
    attachs: {
      type: String,
      required: false,
    },
    fileLists: {
      //直接传入集合的方式
    },
    allowEdit: {
      type: Boolean,
      required: false,
      default: true,
    },
    required: {
      type: Boolean,
      default: false,
    },

    mustInput: {},
    // IsPublic: {
    //   type: Boolean,
    //   required: false,
    // },
  },
  components: {
    PdfPreView,
  },
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      fileList: [],
      filePopup: false,
      label: "附件",
      showPdf: false,
      pdfAttcode: "",
      pdfUrl: "",
      showImg: false,
      imagePath: "",
      edit: true,
      require: Boolean,
    };
  },
  created() {
    if (this.labelName) {
      this.label = this.labelName;
    }
  },
  watch: {
    attachs: {
      handler(newName, oldName) {
        if (this.attachs && this.attachs.length > 0) {
          this.fileList = JSON.parse(this.attachs);
        } else {
          this.fileList = [];
        }
      },
    },

    allowEdit: {
      handler(newName, oldName) {
        this.allowEdit = newName;
        this.edit = this.allowEdit;
      },
    },
  },
  methods: {
    _goEnclosure(item) {
      let params = { attCode: item.AttCode };
      let _this = this;
      _this.$axios
      .get("/CommonAttach/GetAttCode",{params:params})
      .then((res) => {
        var urlPath = res.data.AttMiddlePath;
        var sourcePath = res.data.AttFilePath;
        if (_this.isPicture(sourcePath)) {
          if (sourcePath.indexOf("http") == -1) {
            console.log(this.baseUrl);
            _this.imagePath = _this.baseUrl + sourcePath;
          } else {
            _this.imagePath = sourcePath;
          }
          _this.showImg = true;
        } else if (urlPath) {
          {
            // _this.pdfUrl = urlPath;
            // _this.showPdf = true;
            this.$router.push({
              path: "/Credential/Enclosure",
              query: { attCode: item.AttCode },
            });
          }
        }
      });
    },
    // _goEnclosure(item) {
    //   this.$router.push({
    //     path: "/Credential/Enclosure",
    //     query: { attCode: item.AttCode },
    //   });
    // },
    isPicture(str) {
      //判断是否是图片 - strFilter必须是小写列举
      var strFilter = ".jpeg|.gif|.jpg|.png|.bmp|.pic|.svg|";
      if (str.indexOf(".") > -1) {
        var p = str.lastIndexOf(".");
        var strPostfix = str.substring(p, this.length) + "|";
        strPostfix = strPostfix.toLowerCase();
        if (strFilter.indexOf(strPostfix) > -1) {
          return true;
        }
      }
      return false;
    },
  },
};
</script>

<style lang="less" scoped>
.imageShow {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.file-list {
  position: relative;
  padding-right: 10px;
  .van-icon {
    position: absolute;
    right: 0px;
    top: 5px;
  }
}

.wrapper {
  display: flex;
  height: 100%;
}

.block {
  width: 120px;
  height: 120px;
  background-color: #fff;
}

.upload-btn {
  height: 30px;
}
</style>
